<template>
    <div class="container" :class="finish ? 'finish' : 'waitting'">
        <div class="head-bar font-white text-align-c">
            <div class="font-18 font-w pad-t-10" v-if="resData.orderStatus === 1">待买家取货</div>
            <div class="font-18 font-w pad-t-10" v-else-if="resData.orderStatus === 3">买家已取货</div>
            <div class="font-18 font-w pad-t-10" v-else-if="resData.orderStatus === 4">订单已完成</div>
            <div class="font-12">疑问咨询：{{memberStore.storePhone}}</div>
        </div>
        <div class="row-bar flex flex-between mar-t-5" @click="$pt.navigateTo({url:'/pages/home/customer-manage/detail/main?id=' + resData.customerMemberId  + '&name=' + resData.customerNickname})">
            <div class="headshop-box">
                <img class="width-50 height-50" v-if="resData.avatar" :src="resData.avatar" alt="">
            </div>
            <div class="width-280 flex flex-between">
                <div>
                    <div class="font-13 font-color-9">昵称：<span class="font-color">{{resData.customerNickname}}</span></div>
                    <!-- <div class="font-13 font-color-9">姓名：<span class="font-color">谢先生</span></div> -->
                    <div class="font-13 font-color-9">电话：<span class="font-color">{{resData.customerPhone}}</span></div>
                </div>
                <div>
                    <img class="width-5 height-10" v-if="fileSpace" :src="fileSpace + '/images/arrow-right.png'" alt="">
                </div>
            </div>
        </div>
        <div class="order-content pad-l-15 pad-r-15 mar-t-5">
            <div class="order-row flex flex-between" v-for="(item,index) in resData.orderGoodsList" :key="index">
                <div class="img-box">
                    <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt="" class="width-90 height-90">
                </div>
                <div class="width-240 shop-content height-90">
                    <div class="line-2 font-14 font-color">
                        {{item.goodsTitle}}
                    </div>
                    <div class="line-1 font-color-9 select-content font-12">{{item.skuDetail}}</div>
                    <div class="flex flex-between font-color">
                        <span class="font-14 font-w">￥{{item.goodsPrice}}</span>
                        <span class="font-11">×{{item.goodsNum}}件</span>
                    </div>
                </div>
            </div>
            <!-- <div class="order-row flex flex-between">
                <div class="img-box">
                    <img v-if="fileSpace" :src="fileSpace + '/images/cancellation-banner.png'" alt="" class="width-90 height-90">
                </div>
                <div class="width-240 shop-content height-90">
                    <div class="line-2 font-14 font-color">
                        暑假热卖 英国旅游 英格兰+苏格兰4日纯玩跟团旅游 赠中文导游
                    </div>
                    <div class="flex flex-between font-color">
                        <span class="font-14 font-w">￥499.00</span>
                        <span class="font-11">×10件</span>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="total-content mar-t-5">
            <div class="total-title font-12 flex flex-between">
                <div class="font-color">商品小计</div>
                <div class="font-color-9">￥{{resData.goodsTotalPrice}}</div>
            </div>
            <div class="total-row font-14 flex flex-between">
                <div class="font-color">订单总计</div>
                <div class="font-red">￥{{resData.goodsTotalPrice}}</div>
            </div>
        </div>
        <div class="order-details font-13 font-color-9 mar-t-5">
            <div><span>订单编号：</span><span>{{resData.orderNo}}</span></div>
            <div class="pad-t-10"><span>下单时间：</span><span>{{resData.createTime}}</span></div>
            <div class="pad-t-10"><span>支付时间：</span><span>{{resData.payTime}}</span></div>
            <div class="pad-t-10">
                <span>订单状态：</span>
                <span class="font-green font-w" v-if="resData.orderStatus === 1">待核销</span>
                <span class="font-red font-w" v-else-if="resData.orderStatus === 3">已核销</span>
                <span class="font-red font-w" v-else-if="resData.orderStatus === 4">已完成</span>
            </div>
            <div class="pad-t-10" v-if="finish"><span>核销时间：</span><span>{{resData.receivedTime}}</span></div>
            <div class="pad-t-10" v-if="finish"><span>&#x3000;核销员：</span><span>{{resData.verifierNickname}}</span></div>
        </div>
        <div class="remark font-color-9 font-13">
            <span>买家留言：</span><span class="font-color">{{resData.customerComment}}</span>
        </div>
    </div>
</template>
<script>
import { getOrder } from '@/api/shop'
export default {
  data() {
    return {
      finish: true, // 判断订单是否完成
      orderId: 0, // 订单ID
      resData: {},
      memberStore: {} // 店铺信息
    }
  },
  onLoad() {
    // if (this.getCurrentPage().query.isFinish === '1') {
    //   this.finish = true
    // } else {
    //   this.finish = false
    // }
    this.orderId = this.getCurrentPage().query.orderId
    getOrder(this.orderId).then((response) => {
      if (response.isError) return
      if (response.data.orderStatus === 1) {
        this.finish = false
      } else if (response.data.orderStatus === 3 || response.data.orderStatus === 4) {
        this.finish = true
      }
      this.resData = response.data
      this.memberStore = response.data.memberStore
    }).catch(() => {
    })
  }
}
</script>
<style lang="less" scoped>
.head-bar{
    height: 75px;
}
.row-bar{
    background: white;
    padding: 15px;
    .headshop-box{
        img{
            border-radius: 50%;
        }
    }
}
.order-content{
    background: white;
    .order-row{
        border-bottom: 1px solid #ededed;
        padding: 15px 0;
        .img-box{
            // background: yellow;
        }
        .shop-content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .select-content{
            background: #f2f2f2;
            padding-left: 5px;
            margin: 5px 0;
        }
    }
    .line-1, .line-2 {
        line-height: unset;
        height: unset;
    }
    
}
.total-content{
    background: white;
    padding: 5px 15px;
    .total-title{
        border-bottom: 1px solid #ededed;
        padding: 7px 0;
    }
    .total-row{
        padding: 13px 0;
    }
}
.order-details{
    background: white;
    padding: 10px 15px;
}
.remark{
    background: white;
    padding: 5px 15px;
    margin: 5px 0;
}
.finish{
    .head-bar{
        background: linear-gradient(to bottom,#1db475,#1db475);  
    }
}
.waitting{
    .head-bar{
        background: linear-gradient(to bottom,#fa4f44,#fa8545);
    }
}
</style>
